<template>
  <div class="container">
    <div class="banner" v-if="isPc()">
      <div class="banner-inner">
        <Banner />
      </div>
    </div>
    <ConfigProvider size="large">
      <div class="content">
        <div class="content-inner">
          <div class="logo tac mb40 fs22">
            {{ appConfig.app.title }}
          </div>
          <Sms v-if="isSms" />
          <Pwd v-else />
          <div class="mt8 flex jcsb">
            <div class="flex aic">
              <template v-if="agreement">
                登录即代表你同意
                <Button size="small" isText type="primary" @click="$router.push('/user-agreement')">用户协议</Button>
              </template>
            </div>
            <Checkbox v-model="isRemember" v-if="cfg.login?.enableRememberMe">记住我</Checkbox>
          </div>
          <template v-if="cfg.login?.enableMobileLogin">
            <div class="p8 mt16">
              <Divider>其他登录方式</Divider>
            </div>
            <div class="tac flex jcc aic">
              <Button shape="round" size="mini" type="normal" @click="isSms = !isSms">
                {{ isSms ? '密码登录' : '短信登录' }}
                {{ $route.mode }}
              </Button>
            </div>
          </template>
        </div>
      </div>
    </ConfigProvider>
  </div>
</template>

<script setup lang="ts">
import { Button, Checkbox, ConfigProvider } from '@idmy/ui'
import { appConfig, getCache, isPc, isWechatWork, setCache, useRemember, cfg } from '@idmy/core'
import { ref, watch } from 'vue'
import Banner from './Banner.vue'
import Pwd from './Pwd.vue'
import Sms from './Sms.vue'

defineProps({
  agreement: { type: Boolean, default: false },
})

const isSms = ref(getCache('isSmsLogin', false))
watch(isSms, val => setCache('isSmsLogin', val, -1, { never: true }), { immediate: true })

const isRemember = useRemember(true)

const isShowDrawer = ref(false)
if (isWechatWork()) {
  isShowDrawer.value = true
}
</script>

<style lang="less">
@import 'index.module';
</style>
